<template>
    <!-- 主体框架 -->
    <div class="chat_gpt_bg">
        <!-- 悬浮窗 -->
        <div class="background" ref="bg" @mousedown="clickdown" @mouseup="clickup" @mousemove="clickmove">
            <div class="up"></div>
            <div class="down"></div>
        </div>
        <!-- 主体内容 -->
        <div>
            <el-drawer v-model="drawer" title="AI对话助手" direction="rtl" class="ai">
                <template #header>
                    <h4>AI对话助手</h4>
                    <el-button @click="clearChatFlag = true" style="margin-right: 20px; background: none;"
                        circle><el-icon>
                            <Delete />
                        </el-icon></el-button>
                </template>
                <div class="content">
                    <Chat_Gpt_Cont ref="chatCont" />
                </div>
            </el-drawer>
        </div>
        <el-dialog class="funDialog" v-model="clearChatFlag" align-center width="300">
            <p class="funDialogp">确定清除该对话的历史对话记录?</p>
            <div class="funDialogdiv">
                <el-button @click="clearChatFlag = false">取消</el-button>
                <el-button type="primary" @click="clearChatCont">
                    确定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang='js'>
import { ref, onMounted } from "vue";
import Chat_Gpt_Cont from "./Chat_Gpt_Cont.vue"
import { Delete } from '@element-plus/icons-vue'
import delChatHistoryAPI from "@/API/main/ChatGPT/deleteChat";
import showMessage from "@/utils/showMessage";

const bg = ref(null)
const chatCont = ref(null)
// 清除对话flag
const clearChatFlag = ref(false)
// 点击移动事件
// 移动flag
let moveflag = false;
// 抽屉开关
const drawer = ref(false);
// drawer.value = true

let location = { x: null, y: null }
// 鼠标落下事件
function clickdown(e) {
    location.x = e.clientX
    location.y = e.clientY
    moveflag = true;
}

// 鼠标抬起事件
function clickup(e) {
    moveflag = false;
    if (e.clientX == location.x && e.clientY == location.y) {
        drawer.value = true;
    }
}

// 鼠标移动事件
function clickmove(e) {
    if (moveflag) {
        bg.value.style.left = (e.clientX - bg.value.offsetWidth / 2) + 'px';
        bg.value.style.top = (e.clientY - bg.value.offsetHeight / 2) + 'px';
    }
}

async function clearChatCont() {
    const res = await delChatHistoryAPI()
    // console.log(res)
    if (res.data.code == 200) {
        showMessage("清除成功", "success")
        clearChatFlag.value = false
        chatCont.value.loadChatHistory()
    }
}
</script>
<style scoped>
.background {
    width: 75px;
    height: 75px;
    position: fixed;
    right: 10px;
    bottom: 200px;
    pointer-events: auto;
    user-select: none;
    background-image: url(../../assets/Chat_Gpt/Chat_Gpt.png);
    background-size: contain;
}

.background .up,
.background .down {
    width: 35px;
    height: 1px;
    background: #001f40;
    position: absolute;
    left: 20px;
}

.background .up {
    top: 42px;
    animation-name: ani;
    animation-duration: 5s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.background .down {
    bottom: 22px;
    animation-name: ani;
    animation-duration: 5s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes ani {
    0% {
        height: 1px;
    }

    10% {
        height: 6px;
    }

    20% {
        height: 1px;
    }

    100% {
        height: 1px;
    }
}

:deep(.el-drawer) {
    background-color: var(--Chat_Gpt_backGround1) !important;
}

:deep(.el-drawer__header) {
    border-bottom: 1px solid var(--Chat_Gpt_fbackGround1);
    margin: 0;
    padding-bottom: 20px;
}

:deep(.el-drawer__header > :first-child) {
    font-weight: bold;
    color: var(--Chat_Gpt_font_Color);
}

:deep(.el-drawer__body) {
    padding: 0;
}

.content {
    width: 100%;
    height: 100%;
    padding-left: 10px;
    padding-top: 10px;
}
</style>
<style>
.chat_gpt_bg .funDialog {
    background: var(--Chat_Gpt_dialogbg) !important;
}

.funDialogp {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    color: var(--Chat_Gpt_dialogcolor);
}

.funDialogdiv {
    display: flex;
    justify-content: space-around;
    gap: 10px;
}

.funDialogdiv>* {
    flex: 1;
}
</style>